/*componet*/
.demo {display:grid;grid-template-columns:100%;border:1px solid #ccc;}
.demo input[type="date"] {width:140px;}
.demo input[type="file"] {width:200px;}
.demo textarea {width:300px;}
.demo .form-item.control {margin:0;flex-direction:row;}
.demo .form-input, .demo .progress {margin-bottom:10px;}
.demo button {margin-right:5px;margin-bottom:5px;}
.demo .view {position:relative;padding:1rem;}
.demo .view .control {display:flex;}
.demo .view .pager {position:static;}
.demo .code {background-color:#f6f8fa;overflow:auto;}
.demo .chart {height:300px;}
.demo.layout {min-height:200px;}
.demo.layout .header, .demo.layout .logo {height:30px;}
.demo.layout .body {top:30px;}
.demo.layout .sider, .demo.layout .logo {width:80px;}
.demo.layout .header, .demo.layout .body {left:80px;}
.demo.layout .view {height:200px;border:1px solid #ccc;}
.demo.layout .logo img {background-color:transparent;margin-top:0;}
.demo-menu {margin:10px;position:relative;height:300px;border:1px solid #ccc;}
.demo-badge, .demo-tag {display:inline-block;position:relative;margin:0.5rem;padding:0.5rem;}
.demo-card {position:relative;margin:1rem;height:200px;}
.demo-carousel {height:200px;}
.demo-dialog {padding:1rem;}
.demo-pdf {height:100%;}

@media screen and (min-width:769px) {
    .demo {grid-template-columns:45% 55%;}
    .demo.block {grid-template-columns:100%;}
    .demo.layout .sider, .demo.layout .logo {width:100px;}
    .demo.layout .header, .demo.layout .body {left:100px;}
}

@media screen and (max-width:1150px) {
    .demo {grid-template-columns:100%;}
}
